<template>
	<view class="pass-box">
		<input type="text" v-model="pass.oldpass" placeholder="输入旧密码" />
		<input type="text" v-model="pass.newpass" placeholder="输入新密码" />
		<input type="text" v-model="pass.confirmpass" placeholder="输入确认密码" />
		<button class="common-btn " @tap="submit" :class="{'colorBtn':disableColor}" :loading="loading" :disabled="disableColor">完成</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pass:{
					oldpass:'',
					newpass:'',
					confirmpass:'',
				},
				disableColor:false,
				loading:false,
			}
		},
		
		watch:{
			pass:{
				handler:function(val,old){
					this.change()
				},
				deep:true
			}
			
		},
		methods:{
			submit(){
				this.loading=true;
				if(!this.check()){
					this.disableColor=false;
					this.loading=false;
					return
				}
				this.disableColor=true;
				this.loading=false;
				uni.showToast({
					title:'修改成功'
				})	
			},
			check(){
				if(!this.pass.oldpass || this.pass.oldpass==''){
					uni.showToast({
						title:'请填写旧密码'
					});
					return false
				}
				if(!this.pass.newpass || this.pass.newpass==''){
					uni.showToast({
						title:'请填写新密码'
					});
					return false
				}
				if(!this.pass.confirmpass || this.pass.confirmpass==''){
					uni.showToast({
						title:'请填写确认密码'
					});
					return false
				}
				if(this.pass.newpass != this.pass.confirmpass){
					uni.showToast({
						title:'密码填写不相同'
					})
					return false
				};
				return true;
				
			},
			change(){
				console.log(11)
				if(this.pass.oldpass && this.pass.newpass&& this.pass.confirmpass){
					this.disableColor=true;
					return
				}
				this.disableColor=false
			},
			
		}
	}
</script>

<style lang="scss">
	@import '../../common/comm.css';
	.pass-box{
		margin: 20upx;
		
	}
	.pass-box input{
		border-bottom: 1px solid #F3F3F3;
		padding: 10px 0;
	}
	
</style>
